<template>
    <div class="container">
        <v-warningToolBar
            :fullPath="postData.opera"
            :tableColumns="tableColumns"
            @changeLie="getChangeLie"
            @getSearchIPArr="getToolBarSearchIPArr"
            @getSearchIP="getToolBarSearchIP"
            @selectLevel="getSelectLevel"
            @selectNodeType="getselectNodeType"
            :tableData="tableDataFn"
            :tableDataFields="tableDataFieldsFn">
        </v-warningToolBar>
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="tableDataFn"
            border
            stripe
            style="width: 100%">
            <el-table-column
                type="index"
                width="50">
            </el-table-column>
            <template v-for="(item) in tableColumns">
                <el-table-column
                    :prop="item.prop"
                    :sortable="item.sortable"
                    :label="item.label"
                    :width="item.width"
                    align="center"
                    v-if="item.isShow"
                    :key="item.prop">
                    <template v-slot="scope">
                        <template v-if="item.format == 'level'">
                            <div style="text-align: center">
                                <el-tag
                                    :type="scope.row.levelType"
                                    disable-transitions
                                    effect="dark">
                                    {{scope.row[item.prop]}}
                                </el-tag>
                            </div>
                        </template>
                         <template v-else-if="item.format == 'action'">
                            <div style="text-align: center">
                               <el-button type="info" size="medium" plain @click="dialogVisible=true">查看</el-button> 
                            </div>
                        </template>
                        <template v-else>
                            <div>
                                {{ scope.row[item.prop] }}
                            </div>
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <v-pagination
            :dataTotal="dataTotal" 
            :curPage="postData.curPage" 
            :pageSize="postData.pageSize" 
            @getCurPage="getPaginationCurPage"
            @getPageSize="getPaginationPageSize">
        </v-pagination>
        <v-Dialog :dialogVisible='dialogVisible' @dialogClose='dialogClose' :dialogData='dialogData'></v-Dialog>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';
import vPagination from 'common/Pagination.vue';
import tableColumns from './WarningTableColumns.js';
import vWarningToolBar from './WarningToolBarLase.vue';
import vDialog from './solveDialog'

export default {
    name: 'warningPanel',
    components: {
        vPagination, vWarningToolBar,vDialog
    },
    data() {
        return { 
            postData: {
                opera: 'alertlist',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    // "monid": "9B86A82E27A3473F9D0F1DF46C9A6790",
                }
            },
            tableData: [],
            dataTotal: 0,
            tableColumns: tableColumns,
            SearchIPArr: [],
            searchJson: {},
            SearchIP: '',
            selectLevel: this.$route.params.level ? this.$route.params.level : '',
            selectNodeType: this.$route.params.nodeType ? this.$route.params.nodeType : 'alertlist',
            handLevel: '',
            loading: true,
            dialogVisible:false,
            dialogData:''
        }
    },
    created() {
        this.initGetTableData();
    },
    computed: {
        tableDataFn() {
            return this.tableData.filter((item) => {
                switch (item.ALERT_LEVEL) {
                    case 1:
                        item.ALERT_LEVEL = '提醒';
                        item.levelType = 'info';
                        break;
                    case 2:
                        item.ALERT_LEVEL = '普通';
                        item.levelType = 'warning';
                        break;
                    case 3:
                        item.ALERT_LEVEL = '紧急';
                        item.levelType = 'danger';
                        break;
                
                    default:
                        break;
                }

                return item;
            });
        },
        tableDataFieldsFn() {
            let _jsonfields = {};
            this.tableColumns.filter((item) => {
                if (item.isShow) {
                    _jsonfields[item.label] = item.prop;
                }
            });

            return _jsonfields;
        }
    },
    methods: {
        initGetTableData() { 
            this.selectLevel == '' ? this.$delete(this.postData.filters, 'ALERT_LEVEL') : this.$set(this.postData.filters, 'ALERT_LEVEL', this.selectLevel);

            if (this.selectNodeType != 'alertlist') {
                this.postData.opera = this.selectNodeType;
            }
            this.getTableData();
        },
        getTableData(){
            this.loading = true;

            // 临时 - 实现网络接口数据
            if ('netalertlist' == this.selectNodeType) {
                this.postData.opera = 'osalertlist';
                this.postData.filtersType = 'exactquery';
                this.$set(this.postData.filters, 'os_type', 'Network');
            } else if ('osalertlist' == this.selectNodeType) {
                this.postData.filtersType = 'fuzzyquery';
                this.$set(this.postData.filters, 'os_type', 'i');
            } else {
                this.postData.filtersType = 'fuzzyquery';
                this.$delete(this.postData.filters, 'os_type');
            }
            
            fetchData({
                postData: JSON.stringify(this.postData)
            }).then((res) => {
                // 临时 - 服务器与网络接口没分开
                // if ('osalertlist' == this.selectNodeType) {
                //     let _data = res.data.filter(item => {
                //         console.log(item);
                //         if ('Network' != item.OS_TYPE) {
                //             return item;
                //         }
                //     });
                //     this.dataTotal = _data.length;
                //     this.tableData = _data;
                // } else if ('netalertlist' == this.selectNodeType) {
                //     let _data = res.data.filter(item => {
                //         if ('Network' == item.OS_TYPE) {
                //             return item;
                //         }
                //     });
                //     this.dataTotal = _data.length;
                //     this.tableData = _data;
                // } else {
                //     this.dataTotal = res.dataTotal;
                //     this.tableData = res.data;
                // }

                this.dataTotal = res.dataTotal;
                this.tableData = res.data;
                // console.log(res)

                this.loading = false;
            });
        },
        getPaginationCurPage(val) {
            this.postData.curPage = val;

            this.getTableData();
        },
        getPaginationPageSize(val) {
            // 分页大小改变之后，重置当前页码为 1
            this.postData.curPage = 1;
            this.postData.pageSize = val;

            this.getTableData();
        },
        getToolBarSearchIP(str){
            // 获取搜索IP关键字
            this.SearchIP = str;
            this.postData.curPage = 1;
            this.SearchIP == '' ? this.$delete(this.postData.filters, 'ip') : this.$set(this.postData.filters, 'ip', this.SearchIP);

            this.getTableData();
        },
        // 未实现
        getToolBarSearchIPArr(arr) {
            // 获取搜索IP关键字
            // this.SearchIPArr = arr;

            // this.postData.curPage = 1;
            // if (this.SearchIPArr.length > 0) {
            //     this.postData.filters['ip'] = this.SearchIPArr;
            // } else {
            //     this.postData.filters['ip'] = [];
            // }

            // this.getTableData();
        },
        getSelectLevel(num){
            // 获取选择级别关键字
            this.selectLevel = num;
            this.postData.curPage = 1;
            this.selectLevel == '' ? this.$delete(this.postData.filters, 'ALERT_LEVEL') : this.$set(this.postData.filters, 'ALERT_LEVEL', this.selectLevel);

            this.getTableData();
        },
        getselectNodeType(nodeType){
            this.selectNodeType = nodeType;
            this.postData.opera = this.selectNodeType;
            
            this.getTableData();
        },
        getChangeLie(val) {
            // 遍历表格列
            this.tableColumns.map((item, index) => {
                // 列的显示隐藏状态改变
                item.isShow = val.includes(item.label);
            });
        },
        dialogClose(){
            this.dialogVisible=false,
            this.dialogData=''
        }
    },
    watch: {
        
    }
}
</script> 

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
    .el-button--mini, .el-button--small{
        font-size: 16px;
    }
</style>